<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>05_SVG-坐标系系统单位</title>
  <!-- 
  SVG（可缩放矢量图形）使用一种二维坐标系统来定义图形的形状和位置。
  1. 坐标系概念
  - 原点：SVG 的坐标系原点（0, 0）位于图形的左上角。X 轴向右延伸，Y 轴向下延伸。
  - 坐标值：坐标值由两个部分组成，X 值表示水平方向的位置，Y 值表示垂直方向的位置。

  2. 单位
  在 SVG 中，坐标可以使用多种单位来定义，常见的单位包括：
   1. 像素（px）
  - 默认单位，表示屏幕上的一个像素。
  - 常用于定义元素的宽度、高度和位置。

   2. 百分比（%）
  - 相对于父元素的尺寸进行计算。
  - 例如， `width="50%"`  表示宽度为父元素宽度的一半。

   3. 厘米（cm）和毫米（mm）
  - 用于打印或高精度图形，1cm = 96px，1mm = 9.6px（在默认的 96 DPI 下）。
  - 适合需要精确尺寸的应用场景。

   4. 英寸（in）
  - 1in = 96px（在默认的 96 DPI 下）。
  - 同样适用于打印和高精度图形。

   5. 点（pt）和派卡（pc）
  - 点（pt）：1pt = 1/72 英寸，常用于排版。
  - 派卡（pc）：1pc = 12pt。

  3. 视口和视图框
  - 视口（viewport）：SVG 图形的显示区域，通常通过  `width`  和  `height`  属性设置。
  - 视图框（viewBox）：定义了坐标系的范围，格式为  `viewBox="minX minY width height"` ，允许图形在不同的显示设备上缩放。

  4. 总结
  SVG 的坐标系使用二维坐标系统，原点位于左上角，坐标值可以使用多种单位（如像素、百分比、厘米、毫米等）来定义。理解这些单位和坐标系统对于创建和操作 SVG 图形至关重要，特别是在需要精确控制图形显示和布局时。通过合理使用坐标系和单位，开发者可以更好地实现所需的视觉效果。
  -->
  <style>
    body, ul{
      margin: 0;
      padding: 0;
    }

    body{
      background-image: url(../../images/grid.png);
    }
    svg{
      background-color: rgba(255, 0, 0, 0.1);
    }
  </style>
</head>
<body>
  
  <h3>1. 坐标系系统</h3>
  <svg
    width="100"
    height="100"
    xmlns="http://www.w3.org/2000/svg"
  >
    <rect
      x="10"
      y="10"
      width="50"
      height="50"
      fill="red"
    ></rect>
  </svg>

  <h3>2. 坐标系单位</h3>
  <svg
    width="100"
    height="5cm"
    xmlns="http://www.w3.org/2000/svg"
  >
    <rect
      x="10"
      y="10"
      width="50px"
      height="2cm"
      fill="red"
    ></rect>
  </svg>
  
</body>
</html>